mnj<template>
  <div class="login-container">
    <div class="login">
          <el-form ref="loginRef"  class="login-form">
            <h3 class="title">中学生在线考试系统</h3>
            <el-form-item  prop="tenantId">
              <el-select  class="tenantSelect"  v-model="loginForm.tenantId"  filterable placeholder="请选择/输入学校名称" style="width: 100%">
                <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId"></el-option>
                <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
              </el-select>
            </el-form-item>
            <el-form-item prop="username">
              <el-input  v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号"  :prefix-icon="User">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input  v-model="loginForm.password" :type="flag?'text':'password'" size="large" auto-complete="off" placeholder="密码" :prefix-icon="Lock">
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input  v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" :prefix-icon="CircleCheck" >
              </el-input>
              <div class="login-code" @click="initVerifyCode">
                <img  :src="codeUrl" class="login-code-img"  alt="加载失败"/>
              </div>
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button  size="large" type="primary" style="width: 100%" @click="handleLogin" :loading="loading">
                <span>登 录</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import type {TenantVO} from "@/api/tenant/types.ts";
import {getTenantNameList} from "@/api/tenant";
import {CircleCheck, Lock,User} from "@element-plus/icons-vue";
import type {LoginData} from "@/api/oauth/types.js";
import type {VerifyCodeResult} from "@/api/common/types.ts";
import {getCaptchaImage} from "@/api/common";
import {doLogin} from "@/api/oauth";
import router from "@/router";


const tenantList = ref<TenantVO[]>([]);
const verifyCode =ref<VerifyCodeResult>()
const codeUrl=ref('')
const  loading=ref(false)
const flag=ref(false)

const loginForm = ref<LoginData>({
  tenantId: '000000',
  username: 'admin',
  password: '',
  code: '',
  uuid: ''
} as LoginData);

onMounted(()=>{
  initTenantList()
  initVerifyCode()
})

/**
 * 获取租户列表
 */
const initTenantList = async () => {
  const res = await getTenantNameList();
  tenantList.value = res.data;
}

/**
 * 初始化验证码
 */
const initVerifyCode = async () => {
  const res = await getCaptchaImage();
  verifyCode.value=res.data
  loginForm.value.uuid=res.data.uuid
  codeUrl.value = 'data:image/gif;base64,' + res.data.img;
}

/**
 * 登录
 */
const handleLogin=async ()=>{
  loading.value=true
  try {
    const res = await doLogin(loginForm.value)
    //登录成功的逻辑
    localStorage.setItem('token',res.data)
    loading.value=false
    router.push({path: '/home'})
  }catch (e){
    //登录失败的逻辑
    await initVerifyCode()
  }finally {
    loading.value=false
    //去除验证码
    loginForm.value.code=''
  }

}

</script>

<style  lang="less" scoped>

.login-container{
  height: 100%;
  width: 100%;
  //background: url("../../public/bg.png") no-repeat;
}
.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 350px;
  padding: 25px 25px 5px 25px;
  margin-top: 100px;

  .el-input {
    height: 40px;
    border-left: none !important;
    border-right: none  !important;
    border-top: none  !important;
     input {
      height: 40px;
      border-left: none !important;
      border-right: none  !important;
      border-top: none  !important;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}

</style>
